<template>
  <div>
    <div class="outDiv">
      <headerBack></headerBack>
      <scroller style="top: 0.88rem;">
        <div>
          <Header contentTitle="方案记录"></Header>
          <div class="main">
            <div class="cardList" v-show="lens > 0">
              <div class="cardItem" v-for="(item, index) of cardLists" :key="index" @click="handleCardClick(index, item.id)">
                <div class="line_1">
                  <b>最佳选课方案结果</b>
                  <span>第{{ lens - index }}次生成</span>
                </div>
                <div class="line_2">
                  <div class="left">
                    <span>生成时间</span>
                    <span>{{ new Date(item.createTime).format('yyyy-MM-dd hh:mm') }}</span>
                  </div>
                  <div class="right">
                    <i class="imgIcon"></i>
                  </div>
                </div>
                <div class="line_3">
                  <span></span>
                  <span></span>
                </div>
              </div>
            </div>
            <div v-show="lens == 0">
              <div class="noDataImage">
                <img src="~/static/nothing/empty_meiyoushuju.png" alt="" />
                <div class="describe">抱歉，这个页面暂无数据~</div>
              </div>
            </div>
          </div>
          <div style="width: 100%; height: 10vh;"></div>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import Header from '~/components/Header'
import headerBack from '~/components/headerBack'
import { getSchemeRecord, getSchemeRecordResult } from '~/api/selectCourse'
import { format } from '~/plugins/filter'
import ls from 'store2'
export default {
  components: {
    Header,
    headerBack,
  },
  data() {
    return {
      cardLists: [],
      sendObj: {},
      recodeData: [],
      lens: 1,
    }
  },
  created() {},

  mounted: function() {
    this.$visit(this.$route.path)
    this.getPlanCord()
  },
  methods: {
    getSchemeRecordResult(id) {
      this.$loading('open')
      getSchemeRecordResult(id)
        .then((res) => {
          sessionStorage.setItem('electiveData', JSON.stringify(res.data))
          this.$hideLoading()
          this.commonJs.gopush('bestPlan')
        })
        .catch((error) => {
          this.$hideLoading()
        })
    },
    getPlanCord() {
      this.$loading('open')
      getSchemeRecord(ls.get('userType'))
        .then((res) => {
          if (res.code === '0') {
            if (res.data) {
              let $index = null
              this.cardLists = res.data
              this.lens = res.data.length
            }
          }
          this.$hideLoading()
        })
        .catch((error) => {
          this.$hideLoading()
        })
    },
    goto(routerName, queryData) {
      this.$router.push({
        path: routerName,
        query: {
          type: queryData,
        },
      })
    },
    handleCardClick(index, id) {
      let num = this.lens - index
      this.getSchemeRecordResult(id)
    },
    // 数字1~9转换成中文
  },
}
</script>

<style lang="less" scoped>
.noDataImage {
  text-align: center;
  padding-top: 2.4rem;
  img {
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: 0.24rem;
  }
  .describe {
    color: #999;
    font-size: 0.28rem;
    line-height: 0.4rem;
  }
}
.outDiv {
  width: 100%;
  height: 100vh;
  background: #fff;

  .main {
    margin-top: 0.3rem;
    padding: 0 0.3rem;

    .cardList {
      .cardItem {
        padding: 0.3rem;
        margin-bottom: 0.3rem;
        width: 100%;
        height: 2.24rem;
        box-shadow: 0 0 0.2rem 0 rgba(204, 204, 204, 0.3);
        border-radius: 0.1rem;
        border: 0.02 solid #eee;

        .line_1 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 0.2rem;

          b {
            color: #222;
            font-weight: bold;
            font-size: 0.3rem;
          }

          span {
            display: inline-block;
            width: 1.9rem;
            height: 0.5rem;
            line-height: 0.5rem;
            text-align: center;
            color: #bbb;
            background: #fafafa;
            border-radius: 0.25rem;
            font-size: 0.24rem;
            font-weight: bold;
          }
        }

        .line_2 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 0.2rem;

          .left {
            color: #999;
            font-size: 0.26rem;
            font-weight: 500;
            line-height: 0.37rem;

            span:first-child {
              margin-right: 0.62rem;
            }
          }
          .imgIcon {
            display: inline-block;
            width: 0.4rem;
            height: 0.4rem;
            background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -1.3rem;
            background-size: 3rem 2.4rem;
          }
        }

        .line_3 {
          color: #999;
          font-size: 0.26rem;
          font-weight: 500;
          line-height: 0.37rem;

          span:first-child {
            margin-right: 0.2rem;
          }
        }
      }
    }
  }
}
</style>
